Add Charts to Our JavaScript App with Anychart — Quadrant, Range Area, Range Bar, and Range Column Charts

Anychart is an easy to use library that lets us add chart into our JavaScript web app.

In this article, we’ll look at how to create basic charts with Anychart.

Quadrant Chart

We can add a quadrant chart with Anychart.

To add it, we write the following HTML:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>

<div id="container" style="width: 500px; height: 400px;"></div>

Then we add the following JavaScript code:

const data = [{
    x: 4,
    value: 42
  },
  {
    x: 13,
    value: 59
  },
  {
    x: 25,
    value: 68
  },
  {
    x: 25,
    value: 63
  },
  {
    x: 44,
    value: 54
  },
];

const chart = anychart.quadrant(data);
chart.container("container");
chart.draw();

The script tag adds the Anychart base package.

Then div is the container that we render the chart in.

Then we add the data array with the chart data.

x has the x-axis values.

value has the y-axis values.

anychart.quadrant adds the quadrant chart and set the data for the chart.

chart.container sets the ID for the container element for the chart.

And chart.draw draws the chart.

Range Area Chart

We can add a range area chart with Anychart.

To add one, we write:

const data = [
  ["January", 0.7, 6.1],
  ["February", 0.6, 6.3],
  ["March", 1.9, 8.5],
  ["April", 3.1, 10.8],
  ["May", 5.7, 14.4]
];

const chart = anychart.area();
const series = chart.rangeArea(data);
chart.container("container");
chart.draw();

The data array has array with the x-axis value, low y-axis value, and high y-axis value in this order.

anychart.area creates the area chart.

chart.rangeArea sets the data for the chart.

The rest of the code is the same as the previous example.

Range Bar Chart

We can add a range bar chart with the following code:

const data = [
  ["January", 0.7, 6.1],
  ["February", 0.6, 6.3],
  ["March", 1.9, 8.5],
  ["April", 3.1, 10.8],
  ["May", 5.7, 14.4]
];

const chart = anychart.bar();
const series = chart.rangeBar(data);
chart.container("container");
chart.draw();

The data array has the same structure as the range area chart.

anychart.bar lets us add a range bar chart.

chart.rangeBar sets the data for the range bar.

The rest of the code is the same as the previous examples.

Range Column Chart

We can add a range column chart with the following code:

const data = [
  ["January", 0.7, 6.1],
  ["February", 0.6, 6.3],
  ["March", 1.9, 8.5],
  ["April", 3.1, 10.8],
  ["May", 5.7, 14.4]
];

const chart = anychart.column();
const series = chart.rangeColumn(data);
chart.container("container");
chart.draw();

The data array has the same structure as the other range charts.

anychart.column creates a range column chart.

chart.rangeColumn sets the data for the range column chart.

The rest of the code is the same as the other examples.

Conclusion

We can add quadrant charts, range area charts, range bar charts, and range column charts easily with Anychart.